<template>
  <div class="pageBox">
    <head-component
      :title="id ? '修改收货地址' : '添加收货地址'"
    ></head-component>
    <div class="content">
      <div class="iptBox flex-between">
        <div class="left">
          <div class="title">收件人</div>
          <input
            class="ipt"
            type="text"
            placeholder="请填写收件人姓名"
            v-model="form.name"
          />
        </div>
      </div>

      <div class="iptBox flex-between">
        <div class="left">
          <div class="title">手机号</div>
          <input
            class="ipt"
            type="text"
            placeholder="请填写收件人手机号"
            v-model="form.mobile"
          />
        </div>
      </div>

      <div class="iptBox flex-between" @click="show = true">
        <div class="left">
          <div class="title">所在地区</div>
          <input
            class="ipt"
            type="text"
            placeholder="省市县区、乡镇等"
            v-model="form.area"
            readonly
          />
        </div>
        <img class="right" src="@/image/my/youjiantou1_btn.png" alt="" />
      </div>

      <div class="iptBox flex-between">
        <div class="left">
          <div class="title">详细地址</div>
          <input
            class="ipt"
            type="text"
            placeholder="街道、楼号等"
            v-model="form.address"
          />
        </div>
      </div>

      <div class="switchBox flex-between">
        <p>设为默认地址</p>
        <van-switch v-model="checked" active-color="#ee0a24" size="30px" />
      </div>
    </div>
    <button class="save" @click="onSave">保存</button>

    <van-popup v-model:show="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import { Toast } from "vant";
import { defineComponent, onMounted, reactive, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import areaJson from "../../untils/area/area.json";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const form = reactive({
      name: "",
      mobile: "",
      area: "",
      address: "",
    });
    const show = ref(false);
    const cascaderValue = ref("");
    const checked = ref(true);

    const province = ref("");
    const city = ref("");
    const area = ref("");
    const provinceId = ref("");
    const cityId = ref("");
    const countyId = ref("");

    // 选项列表，children 代表子选项，支持多级嵌套
    const options = ref([]);

    const id = ref(
      router.currentRoute.value.query.id
        ? router.currentRoute.value.query.id
        : ""
    );

    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      province.value = selectedOptions[0].text;
      provinceId.value = selectedOptions[0].value;
      city.value = selectedOptions[1].text;
      cityId.value = selectedOptions[1].value;
      area.value = selectedOptions[2].text;
      countyId.value = selectedOptions[2].value;
      show.value = false;
      form.area = selectedOptions.map((option) => option.text).join("/");
    };

    function onSave() {
      if (!form.name) {
        Toast("请填写收件人姓名");
        return;
      }
      if (!form.mobile) {
        Toast("请填写收件人手机号");
        return;
      }
      if (!form.area) {
        Toast("请填写省市县区、乡镇等");
        return;
      }
      if (!form.address) {
        Toast("请选择所在地区");
        return;
      }
      post("/portal", {
        module: "User",
        interface: id.value ? "6005" : "6001",
        data: {
          id: id.value,
          name: form.name,
          mobile: form.mobile,
          province: province.value,
          city: city.value,
          area: area.value,
          address: form.address,
          status: checked.value ? 1 : 0,
          provinceId: provinceId.value,
          cityId: cityId.value,
          countyId: countyId.value,
        },
      }).then(() => {
        if (id.value) {
          Toast("修改成功");
        } else {
          Toast("添加成功");
        }
        setTimeout(() => {
          router.go(-1);
        }, 1500);
      });
    }

    // 地址详情
    function details() {
      if (!router.currentRoute.value.query.id) {
        return;
      }
      post("/portal", {
        module: "Address",
        interface: "2002",
        data: {
          id: id.value,
        },
      }).then((res) => {
        console.log("地址详情", res);
        form.name = res.data.name;
        form.mobile = res.data.mobile;
        form.area =
          res.data.province + "/" + res.data.city + "/" + res.data.area;
        form.address = res.data.address;
        province.value = res.data.province;
        provinceId.value = res.data.provinceId;
        city.value = res.data.city;
        cityId.value = res.data.cityId;
        area.value = res.data.area;
        countyId.value = res.data.countyId;
        checked.value = res.data.status == 1 ? true : false;
      });
    }
    details();

    onMounted(() => {
      options.value = areaJson;
      console.log("options.value:", options.value);
      document.getElementsByTagName("title")[0].innerHTML = id.value ? '修改收货地址' : '添加收货地址';
    });
   
    return {
      form,
      checked,
      show,
      cascaderValue,
      options,
      province,
      city,
      area,
      provinceId,
      cityId,
      countyId,
      id,
      onFinish,
      onSave,
      details,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  .content {
    margin-top: 20px;
    background: #fff;
    padding: 0 30px 31px;
    .iptBox {
      height: 172px;
      padding: 40px 0 23px 0;
      .left {
        width: 100%;
        .title {
          font-size: 30px;
          font-weight: 400;
          color: #333333;
          margin-bottom: 30px;
        }
        .ipt {
          width: 100%;
          border: none;
          background: transparent;
          color: #333333;
          font-size: 26px;
        }
      }
      .right {
        width: 32px;
        height: 32px;
      }
    }
    .switchBox {
      margin-top: 31px;
      p {
        font-size: 30px;
        font-weight: 400;
        color: #333333;
      }
    }
  }
  .save {
    width: 92%;
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    height: 88px;
    background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
    border: none;
    border-radius: 16px;
    margin: 140px auto 0;
    display: block;
  }
}
</style>